import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'app-most-echarts',
  templateUrl: './most-echarts.component.html',
  styleUrls: ['./most-echarts.component.less']
})
export class MostEchartsComponent implements OnInit {

  @Input() formData;
  @Input() educationData;

  @ViewChild('box', {static: true}) box: ElementRef;
  title = 'chart';
  data: any;

  constructor() {

  }

  // tslint:disable-next-line:typedef
  ngOnInit() {
    this.data = this.formData;
    this.initCharts();
  }

  // tslint:disable-next-line:typedef
  initCharts() {

    const ec = echarts as any;
    const lineChart = ec.init(this.box.nativeElement);

    const lineChartOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        // orient: 'vertical',
        bottom: 10,
        // left: 80,
        data: this.data.map(item => item.name),
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          // center: ['50%', '40%'],
          radius: ['20%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.data
        }
      ]
    };
    lineChart.setOption(lineChartOption);

    window.addEventListener('resize', () => {
      console.log('我收缩了');
      lineChart.resize();
    });
  //   setTimeout(function (){
  //     window.onresize = function () {
  //       console.log('我收缩了');
  //       lineChart.resize();
  //     };
  //   }, 200);
  }

}
